<template>
	<view class="language">
		<view class="flex" @click="$refs.popup.open()">
			<m-icon type="icon-yuyan-shi" v-if="iconShow" />
			<text class="fs26 mlr-8">{{arrList[locale]}}</text>
			<m-icon type="icon-xiala" v-if="iconShow" />
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox pt-24 pb-32 flex-column">
				<view class="plr-24 popup_header flex-between pb-16">
					<text class="fs28">{{$t('mine.yysz')}}</text>
					<m-icon class="p-16" @click="$refs.popup.close()" type="icon-guanbi" color="#333" />
				</view>
				<view class="popup_content ptb-6 ">
					<view class="langArr ptb-32 plr-24 fs26 flex-between" v-for="(item,idx) in arrList" :key="idx"
						:class="{'acitve':idx==locale}" @click="onLocaleChange(idx)">
						<text>{{item}}</text>
						<m-icon v-if="item==locale" class="p-16" @click="$refs.popup.close()" type="icon-xuanzhong"
							size="28" color="var(--theme)" />
					</view>
				</view>
				<view class="popup_footer flex jc-center ptb-32 plr-24" @click="$refs.popup.close()">
					<text class="fs28">{{$t('add01.guanbi')}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { GetEnum } from '@/api/Ctrls.js'
	import { mapState } from 'vuex'
	export default {
		name: "m-language",
		data() {
			return {
				arrList:{
					// 'auto':this.$t('setting.zdjc'),
					'zh-Hans':'简体中文',
					'zh-Hant':'繁體中文',
					'en':'English',
					'ko':'한국어',
					'ja':'日本語',
				},
				arrList2: [{
						name: '简体中文',
						code: 'zh-Hans'
					},
					{
						name: '繁體中文',
						code: 'zhHant'
					},
					{
						name: 'English',
						code: 'en'
					},
					{
						name: '한국어',
						code: 'ko'
					},
					{
						name: '日本語',
						code: 'ja'
					}
				]
			};
		},
		props: {
          iconShow:{
			  type:Boolean,
			  default:true,
		  }
		},
		computed: {
			...mapState({
				locale: state => state.setting.locale,
				langArr: state => state.general.enum['lang']
			}),
			// langName(){
			// 	return this.getOneValueFromArrObj(this.arrList,'code',this.locale,'name')
			// }
		},
		filters:{
			
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		},
		methods: {
			onLocaleChange(locale) {
				this.setLocale(locale)
				// if (this.isAndroid) {
					
				// 	// uni.showModal({
				// 	// 	content: this.$t('language-change-confirm'),
				// 	// 	success: (res) => {
				// 	// 		if (res.confirm) {
				// 	// 			this.setLocale(locale)
				// 	// 		}
				// 	// 	}
				// 	// })
				// } else {
				// 	this.setLocale(locale)
				// }
			},
			async setLocale(val) {
				uni.showLoading()
				this.$i18n.locale = val;
				this.$store.commit('setting/SET_LOCALE', val);
				this.$refs.popup.close();
				await GetEnum();
				uni.setLocale(val);
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	.popupBox {
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background-color: #fff;
		color: #333;
		max-height: 85vh;

		.popup_header {
			border-bottom: 3rpx solid #efefef;
		}

		.popup_content {
			flex: 1;
			overflow: auto;

			.langArr+.langArr {
				border-top: 3rpx solid #efefef;
			}

			.langArr.acitve {
				color: var(--theme);
			}
		}

		.popup_footer {
			border-top: 8rpx solid #f6f6f6;
		}
	}
</style>
